<template>
  <view class="page">
    <view class="top">
      <view class="top-1 flex">
        <view class="top-1-time flex" @click="show=true">{{ query.start_date ? query.start_date + '至' + query.end_date :
          '筛选订单日期' }}<u-icon name="arrow-down" color="#333333" size="14"></u-icon> </view>
        <!-- <view class="top-1-1">共消费99旺币</view> -->
      </view>
    </view>
    <view class="box" :style="{ height: boxHeight + 'px' }">
      <scroll-view scroll-y="true" class="scroll-box" @scrolltolower="lower">
        <view class="box-item flex" v-for="item in list" :key="item.id">
          <view class="item-1 white">{{ item.points_setting_title }} <view class="item-time">{{ item.created_at }}</view>
          </view>
          <view class="ji">{{ item.points_setting_values }}</view>
        </view>
      </scroll-view>
    </view>
    <l-calendar v-model="show" @change="change" :isRange="true" activeBgColor="#FFBB50"
      rangeBgColor="rgba(255,187,80,0.3)" :initStartDate="query.start_date" :initEndDate="query.end_date"></l-calendar>
  </view>
</template>
<script>
import { runningAccount } from "@/utils/request.js";
export default {
  data() {
    return {
      query: {
        p: 0,
        n: 10,
        start_date: '',
        end_date: '',
      },
      boxHeight: 0,
      total: 0,
      list: [],
      show: false
    };
  },
  mounted() {
    this.calculateBoxHeight();
    this.getinit()
  },
  methods: {
    async runningAccount(data) {
      return await runningAccount(data)
    },
    lower() {
      if (this.list.length < this.total) {
        this.query.p++
        this.getinit()
      }
    },
    getinit() {
      this.runningAccount(this.query).then(res => {
        if (res) {
          this.list = [...res.list, ...this.list]
          this.total = res.count
        }
      })
    },
    change(event) {
      this.query.start_date = event.startDate;
      this.query.end_date = event.endDate;
      this.list = []
      this.query.p = 0
      this.getinit()
    },
    calculateBoxHeight() {
      const systemInfo = uni.getSystemInfoSync();
      const viewportHeight = systemInfo.windowHeight;
      const offset = 150 * 0.5; // 237rpx 转换为 px
      this.boxHeight = viewportHeight - offset;
    },
    handlechange(e) {
      console.log(e);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep button {
  background-color: #ffbb50 !important;
  border-radius: 162rpx;
  font-size: 26rpx;
  height: 80rpx;
  line-height: 80rpx;
}

.page {
  padding-top: 28rpx;

  .box {
    width: 694rpx;
    margin: 15rpx auto 0;
    background: #ffffff;
    border-radius: 12rpx;
    height: 100%;
  }

  .scroll-box {
    width: 594rpx;
    margin: 0 auto;
    height: 100%;
    padding-bottom: 30rpx;

    .box-item {
      padding: 27rpx 0;
      border-bottom: 1rpx solid #f2f2f2;

      .item-1 {
        flex: 1;
        font-size: 25rpx;
        color: #333333;

        .item-time {
          font-size: 21rpx;
          margin-top: 13rpx;
        }
      }

      .ji {
        font-size: 26rpx;
        color: #ffbb50;
      }
    }
  }

  ::v-deep .u-tabs {
    width: 100%;
    margin: 0 auto;

    text {
      font-size: 30rpx !important;
    }

    .u-tabs__wrapper__nav__item {
      padding: 0 40rpx !important;
    }
  }

  .top {
    width: 632rpx;
    padding: 27rpx 31rpx;
    border-radius: 12rpx;
    margin: 0 auto;
    background: #ffffff;

    .top-1 {
      justify-content: space-between;
    }

    .top-1-time {
      font-size: 25rpx;
    }

    .top-1-1 {
      font-size: 21rpx;
      color: #7f7f7f;
    }
  }
}
</style>